<template>
	<view class="mainPage">
		<cu-custom :isBack="true">
			<block slot="content">技师中心</block>
		</cu-custom>
		<view class="padding-sm">
			<view class="flex align-center userinfo padding-sm">
				<image :src="USERINFO.headimg" class="avatar" />
				<view class="flex-sub padding-left-sm">{{ USERINFO.nickname }}</view>
			</view>
			<view class="statictis padding-sm margin-bottom">
				<view class="flex align-center">
					<text class="text-bold">数据概览</text>
					<view class="flex-sub"></view>
					<text class="text-xs padding-left-sm padding-right-sm text-gray" v-for="item in dateArr"
						:key="item.value" :class="{ 'themeColor': search.date === item.value }"
						@tap="setSearch('date', item.value)">{{ item.title }}</text>
				</view>
				<view class="padding-top grid col-3">
					<view class="padding-sm text-center">
						<view class="bg-f5f5f7 padding-sm radius-xl">
							<text class="text-xl themeColor">{{ $utils.formatNumber(statistics.order_num) }}</text>
							<view class="text-xs">订单量</view>
						</view>
					</view>
					<view class="padding-sm text-center">
						<view class="bg-f5f5f7 padding-sm radius-xl">
							<text class="text-xl themeColor">{{ $utils.formatNumber(statistics.order_price) }}</text>
							<view class="text-xs">订单额</view>
						</view>
					</view>
					<view class="padding-sm text-center">
						<view class="bg-f5f5f7 padding-sm radius-xl">
							<text class="text-xl themeColor">{{ $utils.formatNumber(statistics.duration) }}</text>
							<text class="text-xs">分钟</text>
							<view class="text-xs">服务时长</view>
						</view>
					</view>
					<view class="padding-sm text-center">
						<view class="bg-f5f5f7 padding-sm radius-xl">
							<text class="text-xl themeColor">{{ statistics.new_customers }}</text>
							<view class="text-xs">新客</view>
						</view>
					</view>
					<view class="padding-sm text-center">
						<view class="bg-f5f5f7 padding-sm radius-xl">
							<text class="text-xl themeColor">{{ $utils.formatNumber(statistics.commission) }}</text>
							<view class="text-xs">分佣</view>
						</view>
					</view>
					<view class="padding-sm text-center">
						<view class="bg-f5f5f7 padding-sm radius-xl">
							<text class="text-xl themeColor">{{ statistics.browse_num }}</text>
							<view class="text-xs">浏览量</view>
						</view>
					</view>
				</view>
			</view>
			<AppointmentService ref="AppointmentServiceRef" />
			<view class="padding-xs radius-xl bg-white menu">
				<view class="padding-sm padding-left">常用功能</view>
				<view class="grid col-4 padding-xs text-center list">
					<view class="item margin-bottom" v-for="(item, index) in menu" :key="index"
						@tap="$utils.$page.open(item.page, true)" v-if="item.auth ? $utils.$auth.auth(item.auth) : true">
						<image :src="item.icon" mode=""></image>
						<view class="text-sm text-black">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	mapState
} from 'vuex'
import AppointmentService from './modules/AppointmentService';
export default {
	components: {
		AppointmentService
	},
	data() {
		return {
			search: {
				date: 'day'
			},
			dateArr: [{
				title: '今日',
				value: 'day'
			},
			{
				title: '昨日',
				value: 'yesterday'
			},
			{
				title: '本周',
				value: 'week'
			},
			{
				title: '本月',
				value: 'month'
			},
			{
				title: '上月',
				value: 'last_month'
			}
			],
			statistics: {
				order_num: '--',
				order_price: '--',
				duration: '--',
				new_customers: '--',
				commission: '--',
				browse_num: '--',
			},
			menu: [
				{
					name: '技师信息',
					icon: require('@/static/image/my/apply.png'),
					page: '/technician/pages/user/index'
				},
				{
					name: '排班',
					icon: require('@/static/image/my/scheduling.png'),
					page: '/technician/pages/user/scheduling'
				},
				{
					name: '服务订单',
					icon: require('@/static/image/my/order.png'),
					page: '/technician/pages/order/list'
				},
				{
					name: '财务明细',
					icon: require('@/static/image/my/bill.png'),
					page: '/technician/pages/user/wallet/log'
				},
				{
					name: '收到评价',
					icon: require('@/static/image/my/comment.png'),
					page: '/technician/pages/user/comment/comment'
				},
				{
					name: '提现',
					icon: require('@/static/image/my/withdrawal.png'),
					page: '/technician/pages/user/wallet/withdrawal'
				},
				{
					name: '我的服务',
					icon: require('@/static/image/my/my_service.png'),
					page: '/technician/pages/user/service'
				},
				{
					name: '服务公海',
					icon: require('@/static/image/my/service_selection.png'),
					page: '/technician/pages/service/selection'
				},
				{
					name: '首页推荐',
					icon: require('@/static/image/my/home_recommend.png'),
					page: '/technician/pages/user/recommend/index'
				},
				{
					name: '邀新有礼',
					icon: require('@/static/image/my/gift_box.png'),
					page: '/technician/pages/user/gift/index',
					auth: { permission: 'new_technicians_gift_state' }
				},
				{
					name: '技师手册',
					icon: require('@/static/image/my/technician_manual.png'),
					page: '/pages/article/content?alias=technician_manual'
				},
				{
					name: '所属商户',
					icon: require('@/static/image/my/mch.png'),
					page: '/technician/pages/mch/index'
				},
			],
		};
	},
	computed: {
		...mapState({
			USERINFO: state => state.USER.USERINFO,
			WEBCONFIG: state => state.WEBCONFIG
		})
	},
	onLoad(options) { },
	onShow() {
		const AppointmentServiceRef = this.$refs.AppointmentServiceRef;
		AppointmentServiceRef && AppointmentServiceRef.getList();
		this.getStatistics();
	},
	methods: {
		setSearch(key, val) {
			this.search[key] = val;
			this.getStatistics();
		},
		getStatistics() {
			this.$utils.$api.Technician.statistics(this.search).then(data => {
				this.statistics = data;
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.userinfo {
	.avatar {
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
	}
}

.statictis {
	background-color: #FFFFFF;
	border-radius: 10px;
}

.menu {
	.list {
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 60upx;
				height: 60upx;
			}
		}
	}
}
</style>